<template>
  <je-modal
    v-model:visible="visibleModule"
    width="800px"
    title="通知面板"
    class="inform-modal"
    :resize="false"
    :maximizable="false"
    :cancel-button="onCancel"
    :ok-button="addModule"
    autocomplete="off"
  >
    <je-form layout="vertical" :model="formState" style="height: 100%">
      <je-form-item :label="$t('informModal.flowBacklog')">
        <je-textarea
          v-model:value="formState.flowBacklog"
          placeholder="编写自定义的HTML模板展示，创建人：{@USER_NAME@}，创建时间：{@NOW_TIME@}，流程名称：{@PROCESS_NAME@}，活动节点：{@PROCESS_CURRENTTASK@}，执行动作：{@SUBMIT_OPERATE@}，执行意见：{@SUBMIT_COMMENTS@}"
          :rows="4"
        />
      </je-form-item>

      <je-form-item :label="$t('informModal.title')">
        <je-textarea v-model:value="formState.title" :rows="4" />
      </je-form-item>

      <je-form-item :label="$t('informModal.dwr')">
        <je-textarea v-model:value="formState.dwr" :rows="4" />
      </je-form-item>

      <je-form-item :label="$t('informModal.email')">
        <je-textarea v-model:value="formState.email" :rows="4" />
      </je-form-item>

      <je-form-item :label="$t('informModal.note')">
        <je-textarea v-model:value="formState.note" :rows="4" />
      </je-form-item>

      <!-- <je-form-item :label="$t('informModal.thirdparty')">
        <je-textarea v-model:value="formState.thirdparty" :rows="4" />
      </je-form-item> -->
      <div class="info">
        <span class="p">
          消息提醒模版配置,引用变量格式: {字段名}
          {@流程变量或系统变量@}流程变量有：@PROCESS_NAME@(流程名称) @PROCESS_CURRENTTASK@(活动节点)
          @SUBMIT_OPERATE@(执行动作) @SUBMIT_COMMENTS@(审批意见)</span
        >
      </div>
    </je-form>
  </je-modal>
</template>

<script>
  import { defineComponent, ref, reactive } from 'vue';
  import { Input, Form, Modal } from '@jecloud/ui';

  export default defineComponent({
    name: 'InformModal',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeTextarea: Input.TextArea,
    },
    props: {
      messageDefinitions: {
        type: Object,
        default: () => {
          return {};
        },
      },
      wfId: {
        type: String,
        default: '',
      },
    },
    emits: ['updateData'],
    setup(props, { emit }) {
      const visibleModule = ref(true);
      const formState = ref(props.messageDefinitions);

      //点击保存
      const addModule = ({ $modal, button }) => {
        emit('updateData', 'ok', formState.value);
      };

      //点击取消
      const onCancel = () => {
        emit('updateData');
      };

      return { visibleModule, formState, addModule, onCancel };
    },
  });
</script>

<style lang="less">
  .inform-modal {
    .ant-col.ant-form-item-control {
      min-height: auto !important;
    }
  }
</style>
